import React, { lazy } from "react";
import {
    AppOutline,
    MessageOutline,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'

const MainLayout = lazy(() => import('../pages/mainLayout'))
const Home = lazy(() => import('../pages/home'))
const Class = lazy(() => import('../pages/class'))
const Message = lazy(() => import('../pages/message'))
const My = lazy(() => import('../pages/my'))
const Detail = lazy(() => import('../pages/detail'))
const Order = lazy(() => import('../pages/order'))
const AddPerson = lazy(() => import('../pages/addPerson'))
const OrderDetali = lazy(() => import('../pages/orderDetail'))
const Pay = lazy(() => import('../pages/pay'))
const Success = lazy(() => import('../pages/success'))

export const homeRoutes = [
    {
        path: '/home',
        element: <Home></Home>,
        title: '首页',
        icon: <AppOutline />,
    },
    {
        path: '/class',
        element: <Class></Class>,
        title: '分类',
        icon: <UnorderedListOutline />,
    },
    {
        path: '/message',
        element: <Message></Message>,
        title: '消息',
        icon: <MessageOutline />,
    },
    {
        path: '/my',
        element: <My></My>,
        title: '我的',
        icon: <UserOutline />,
    },
]

export const routes = [
    {
        path: '/',
        element: <MainLayout></MainLayout>,
        children: [
            ...homeRoutes,
            {
                path: '/',
                element: <Home></Home>
            }
        ]
    },
    {
        path: '/detail',
        element: <Detail></Detail>,
    },
    {
        path: '/order',
        element: <Order></Order>,
    },
    {
        path: '/orderDetail',
        element: <OrderDetali></OrderDetali>,
    },
    {
        path: '/addperson',
        element: <AddPerson></AddPerson>,
    },
    {
        path: '/pay',
        element: <Pay></Pay>,
    },
    {
        path: '/success',
        element: <Success></Success>,
    },
]